<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: 'home' }">小队</el-breadcrumb-item>
      <el-breadcrumb-item>发送邀请</el-breadcrumb-item>
    </el-breadcrumb>

    <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">发送邀请</h2>

    <div style="margin: 3% 5% 3% 5%;">
      <!-- 选择框和搜索栏 -->
      <!-- <el-row :gutter="20" style=" margin-top: 20px; ">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="value" class="m-2" placeholder="选择班级 ">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content ep-bg-purple">
            <el-input v-model="input1" class="w-50 m-2" placeholder="搜索" :prefix-icon="Search"
              style="width: auto; margin-right: 10px;" />
            <el-button type="primary" :icon="Search" @click="getStuInfo">Search</el-button>
          </div>
        </el-col>
      </el-row> -->
      <!-- 表格 -->
      <el-table :data="filterTableData" height="550" style="width: 100%; height: 50%;">
        <el-table-column prop="stuId" label="学号" width="180" />
        <el-table-column prop="stuName" label="姓名" width="180" />
        <el-table-column prop="stuSex" label="性别" />
        <el-table-column prop="stuPhone" label="联系方式" />
        <el-table-column prop="classId" label="班级" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #header>
            <el-input v-model="search" size="small" placeholder="查询姓名" />
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="sendApply(scope.row.stuId)">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   <el-table :data="tableData" height="550" style="width: 100%; height: 50%;">
    <el-table-column prop="date" label="学号" width="180" />
  </el-table> -->
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search } from '@element-plus/icons-vue'
import { ref, reactive,onBeforeMount, computed } from 'vue'
import requests from '@/api/ajax.js'
const value = ref('')

const input1 = ref('')
// 下拉框选项
const options = [
  {
    value: 'class1',
    label: 'RB软工互191',
  },
  {
    value: 'class2',
    label: 'RB软工互192',
  },
]

//el-table必须接收数组对象
const stuList = ref([{
  stuId: '',
  stuName: '',
  stuSex: '',
  classId: '',
  stuIdentity: '',
  stuCollege: '',
  stuPhone: '',
  attendedDate: '',
  stuPassword: '',
}])


onBeforeMount(() => {

  //请求能够发出组队邀请的学生信息
  const asd = requests({ url: "/students", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    stuList.value = abc
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

function sendApply (id){
  const asd = requests({ url: "/students/team/applySend/"+id, method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    if(res.code === 20011)
    {
      alert(res.msg)
    }else if(res.code === 20010){
      alert(res.msg)
    }
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
}

// const getStuList = async () => {
//   const res = await reqGetSearchInfo(queryFore.value)

// }
// getStuList()

//table中的搜索框
const search = ref('')
const filterTableData = computed(() =>
stuList.value.filter(
    (data) =>
      !search.value ||
      data.stuName.toLowerCase().includes(search.value.toLowerCase())
  )
)
</script>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>